<template>
  <div class="m-select-menu">
    <div class="m-select-menu-opacity" @click="handleClose"></div>
    <m-checkbox-group :value="value" :max="max" @change="handleChange">
      <m-checkbox
        v-for="item in options"
        :disabled="item.disabled"
        :value="item.value"
        :key="item.value">
          <div v-html="item.html"></div>
      </m-checkbox>
    </m-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array
    },
    value: {
      type: [String, Number, Array]
    },
    max: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },
    handleChange (value) {
      this.$emit('input', value).$emit('change', value)
    }
  }
}
</script>

<style lang="scss">
  .m-select{
    &-menu{
      position:fixed;
      left:0;
      top:0;
      width:100%;
      height:100%;
      z-index:1000;
      &-opacity{
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:$color-overlay;
        position:absolute;
      }
      .vx-checkbox-group{
        background:#fff;
        position:absolute;
        top:50%;
        left:50%;
        width:80%;
        border-radius:$border-radius-base;
        z-index:1;
        overflow-y:auto;
        max-height: 80%;
        transform: translate3d(-50%,-50%,0);
        box-shadow: 0 0 8px rgba(0,0,0,0.1);
        backface-visibility: hidden;
      }
    }
  }
</style>
